<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--
        BootStrap是什么
            1.轻量级开发响应式前端框架
            2.全局CSS组件，JS插件
            3.栅格系统，将页面分成12各等份
            .col-xs- 手机
            .col-sm- 平板
            .col-md- PC
            .col-lg- 超大屏幕
        BootStrap有什么作用
            复制粘贴，提高开发人员的开发效率
        响应式页面
             适应不同的分辨率显示不同的样式，提高用户体验
    -->
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 需要引入JQuery-->
    <script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <!--为了确保适当的绘制和触屏缩放，需要在 head 之中添加 viewport 元数据标签。-->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
        div{
            border: 1px solid red;
        }
    </style>
</head>
<body>
        <div class="container">
            这个是bootstrap的布局容器，类用于固定宽度并支持响应式布局的容器
            <div class="row">
                <div class="col-md-1 col-sm-2 col-xs-4">.col-md-1 </div>
                <div class="col-md-1 col-sm-2 col-xs-4">.col-md-1</div>
                <div class="col-md-1 col-sm-2 col-xs-4">.col-md-1</div>
                <div class="col-md-1 col-sm-2">.col-md-1</div>
                <div class="col-md-1 col-sm-2">.col-md-1</div>
                <div class="col-md-1 col-sm-2">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
                <div class="col-md-1">.col-md-1</div>
            </div>
            <div class="row">
                <div class="col-md-8">.col-md-8</div>
                <div class="col-md-4">.col-md-4</div>
            </div>
            <div class="row">
                <div class="col-md-4">.col-md-4</div>
                <div class="col-md-4">.col-md-4</div>
                <div class="col-md-4">.col-md-4</div>
            </div>
            <div class="row">
                <div class="col-md-6">.col-md-6</div>
                <div class="col-md-6">.col-md-6</div>
            </div>
        </div>

        <div class="container-fluid">
            这个是bootstrap的布局容器，类用于 100% 宽度，占据全部视口（viewport）的容器
            <a href="#" class="btn btn-danger">百合网</a>
            <a href="#" class="btn">世纪佳缘</a>
            <a href="#" >天上人间</a>
        </div>
</body>
</html>